<template>
  <div class="goods-info-box">
    <!-- 小球 -->
    <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
      <div class="ball" v-show="flag" ref="ball"></div>
    </transition>
    <!-- 轮播图区域 -->
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <swiper :swperList="goodsImgInfo" :flag="false"></swiper>
        </div>
      </div>
    </div>

    <!-- 价格区域 -->
    <div class="mui-card">
      <div class="mui-card-header">{{goodsBaseInfo.title}}</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p class="prices">
            市场价：
            <span class="old">¥ {{goodsBaseInfo.market_price}}</span>
            &nbsp;&nbsp;
            销售价：
            <span class="new">¥ {{goodsBaseInfo.sell_price}}</span>
          </p>
          <div class="amount">
            数量：
            <number-box @getCount="getCount" :maxCount="goodsBaseInfo.stock_quantity"></number-box>
          </div>

          <!-- 
            父组件如何获取子组件的数据：
            当这个数字选择框发生改变的时候，就会触发change事件，父组件为子组件传递过去一个函数，然后当数字框发生变化的时候，会调用父组件的方法，进来传递过来数据
          -->

          <!-- 如何来控制最大的选择区域呢？ -->
          <!-- 
             把父组件的库存值，通过属性绑定的方式传递给子组件，然后子组件绑定相应的属性是否可以？？？
              不可以，因为这个商品的信息是通过promise 异步的方式来获取，当页面加载完成后这个值并没有进行相应的改变，所以不可以
              要在子组件进行watch监听自己接受到的 maxCount 的属性，然后利用mUI自带的API进行设置可以选择最大值
          -->

          <div class="btn">
            <mt-button type="primary" size="small">立即购买</mt-button>
            <mt-button type="danger" size="small" @click="addToShopCart">加入购物车</mt-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 商品参数区域 -->
    <div class="mui-card">
      <div class="mui-card-header">商品参数</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>商品货号：{{goodsBaseInfo.goods_no}}</p>
          <p>库存情况：{{goodsBaseInfo.stock_quantity}}</p>
          <p>上架时间：{{goodsBaseInfo.add_time | dateFormat}}</p>
        </div>
      </div>
      <div class="mui-card-footer">
        <mt-button type="primary" size="large" plain @click="toIntroduce">图文介绍</mt-button>
        <mt-button type="danger" size="large" plain @click="toComment">商品评论</mt-button>
      </div>
    </div>
  </div>
</template>

<script>
// 导入轮播图组件
import swiper from "../subcomponent/Swiper.vue";
import numberBox from "../subcomponent/NumberBox.vue";

export default {
  data() {
    return {
      id: this.$route.params.id,
      goodsImgInfo: [],
      goodsBaseInfo: [],
      flag: false,
      count: 1
    };
  },
  created() {
    this.getGoodsImgInfo();
    this.getGoodsBaseInfo();
  },
  methods: {
    // 获取商品缩略图信息
    getGoodsImgInfo() {
      this.$http.get("api/getthumimages/" + this.id).then(rs => {
        let data = rs.body;

        if (data.status === 0) {
          //   data.message.forEach(element => {
          //     element.img = element.src;
          //   });
          this.goodsImgInfo = data.message;
        }
      });
    },
    // 获取商品的基本的信息
    getGoodsBaseInfo() {
      this.$http.get("api/goods/getinfo/" + this.id).then(rs => {
        let data = rs.body;

        if (data.status === 0) {
          this.goodsBaseInfo = data.message[0];
        }
      });
    },
    beforeEnter(el) {
      el.style.transform = "translate(0px, 0px)";
    },
    enter(el, done) {
      // 此时移动的距离固定死，在不同的分辨率下面，小球的最终位置会偏，因为在不同的分辨率或者滚动条滚动的情况下，小球向下移动的距离是不一样的
      // 解决方案：1.获取到 小球的坐标值， 2.获取到那个徽章的坐标值，  用徽章的(x,y)坐标值减去小球的坐标值，得到的距离就是小球移动的最终距离
      // 用到的技术为  DOM.getBoundingClientRect() 返回的是一个对象，属性包括 left right  top  bottom

      // 获取到小球，因为小球就是在本组件内部，所以可用 ref获取
      const ballPosition = this.$refs.ball.getBoundingClientRect();
      // 获取到徽章的坐标值，因为徽章不属于本组件，属于APP组件，所以不必太过麻烦用到组件之间的传值，直接利用DOM操作来获取
      const badgePosition = document
        .getElementById("badge")
        .getBoundingClientRect();

      // 获取两个之间的数据
      let x = badgePosition.left - ballPosition.left;
      let y = badgePosition.top - ballPosition.top;

      el.offsetWidth;
      el.style.transform = `translate(${x}px, ${y}px)`;
      el.style.transition = "all 0.5s cubic-bezier(.4,-0.3,1,.68)";

      done();
    },
    afterEnter(el) {
      this.flag = !this.flag;
    },

    // 跳转到图文介绍
    toIntroduce() {
      this.$router.push({ name: "goodsIntroduce", params: { id: this.id } });
    },
    // 跳转到评论页面
    toComment() {
      this.$router.push({ name: "goodsComment", params: { id: this.id } });
    },
    // 获取子组件选择的数量
    getCount(data) {
      // console.log('子组件传递过来的数据为： ' + data);
      this.count = data;
    },
    // 加入购物车
    addToShopCart() {
      this.flag = !this.flag;
      // 组织一条购物车的对象
      let obj = {
        id: this.id,
        count: this.count,
        prices: this.goodsBaseInfo.sell_price,
        status: true
      };
      // 调用 状态管理中的 添加购物车方法
      this.$store.commit("addCart", obj);
    }
  },
  components: {
    swiper,
    numberBox
  }
};
</script>


<style lang="scss" scoped>
.prices {
  color: #000;
  .old {
    text-decoration: line-through;
  }
  .new {
    font-size: 16px;
    font-weight: bold;
    color: red;
  }
}
.btn {
  button {
    margin-top: 15px;
  }
}
.mui-card-footer {
  display: block;
  button {
    margin: 10px 0px;
  }
}
.ball {
  width: 15px;
  height: 15px;
  background: red;
  border-radius: 50%;
  position: absolute;
  left: 124px;
  top: 408px;
  z-index: 77;
  // transform: translate(114px, 212px);
}
</style>
